<template>
	<div id="firstcomponent">
		<div v-if="start">
			加载中.........
		</div>

		<div v-else class="list">
			<p class="title">{{title}}</p>
			<ul>
				<li v-for="item in date">
					<router-link :to="{ name: 'list', params: { id: item.id }}">
						<img :src="item.images">
						<p>{{item.title}}</p>
					</router-link>
				</li>
			</ul>
		</div>
	</div>
</template>


<script type="text/javascript">
		export default{
			data(){
				return{
					title:"小说目录",
					count:"789456789",
					prev:"",
					next:"",
					start:true,
					date:[],
					ldata:[]
				}
			},
			mounted(){},
			watch:{
				//'$route':'fetchData'
			},
			created(){

					this.$http.jsonp('http://localhost:3000/book').then(function(response) {
							      // 这里是处理正确的回调
							        this.date = response.data;
							        console.log("请求成功");
							        this.start=false;

							    }, function(response) {
							        // 这里是处理错误的回调
							        console.log("请求失败");
							    })
				
				
	        },
			methods: {}
		}
</script>

<style type="text/css">
	.title{font-style: 16px;text-align: center;padding: 20px;font-size: 16px;}
	.list ul li{width: 25%;float: left;text-align: center;line-height: 2;font-size: 16px;margin-top: 10px;}
	.list ul li img{width: 124px;height: 154px;}
</style>